<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="container">
            <div class="top">
                <van-icon name="arrow-left" size="30" @click="back_step" />
                <div class="tittle">
                    全部评价
                </div>
                <div></div>
            </div>
        </div>
        <div class="body">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="message" v-for="item in list">
                    <div class="user_info">
                        <div class="user_text">
                            <div class="user_img"></div>
                            <div class="user_name">你是蟋蟀的弟弟草率么</div>
                        </div>
                        <div class="time">2020-10-06</div>
                    </div>
                    <div class="message_content">很好，非常棒！！蜂花护发素</div>
                    <div class="goods_style">
                        小棕(棕色羊驼)
                    </div>
                </div>
            </van-list>
        </div>
    </van-pull-refresh>
    <van-empty description="空空如也" v-if="!list.length" style="height:90vh ;" />
</template>
    
<script setup lang='ts'>
import { useRoute, useRouter } from "vue-router"
import { ref, onMounted } from "vue"
import { Toast } from "vant";
const Router = useRouter()
//跳转事件
function back_step() {
    Router.go(-1)
}
const list: any = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
            Toast.success({
                message: '加载成功',
                duration: 2000
            })
        }

        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }

        loading.value = false;

        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 1000);
};


const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();


};
</script>
    
<style scoped>
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 0;
    background-color: #fff;
}

.tittle {
    font-size: larger;
    font-weight: 600;
}

.container {
    background-color: #eee;
}

.body {
    height: 92vh;
    overflow: scroll;
}

.message {
    margin-bottom: 3vw;
    background-color: #fff;
    padding-left: 3vw;
}

.user_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user_img {
    margin: 2vw 2vw 3vw 0;
    width: 10vw;
    height: 10vw;
    background-color: red;
    border-radius: 50%;
}

.user_text {
    display: flex;
    align-items: center;
}

.time {
    padding-right: 3vw;
}

.message_content {
    font-size: large;
    padding: 3vw 0 3vw 0;
}

.goods_style {
    font-size: medium;
    padding-bottom: 3vw;
    color: #808080;
}
</style>